<script lang="ts" setup>
import type { MyCompleteTaskListInfoVO, MyCompleteTaskVO } from '@/api/task/taskType'
import { queryMyCompleteTaskList } from '@/api/task/taskApi'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'

// 定义当前页码
const currentPage = ref<number>(1)
// 默认页行数
const pageSize = ref<number>(10)
// 数据总数
const total = ref<number>(0)
// 定义响应式数据 myCompleteTaskData 收集数据
const myCompleteTaskData = ref<MyCompleteTaskVO[]>([])
// 表格列定义
const tableColumns = [
  { label: '#', type: 'index', align: 'center', width: '50px' },
  { label: '流程定义ID', prop: 'processDefinitionId', align: 'center' },
  { label: '流程定义名称', prop: 'processDefinitionName', align: 'center' },
  { label: '流程实例ID', prop: 'processInstanceId', align: 'center' },
  { label: '发起人名称', prop: 'startUserName', align: 'center' },
  { label: '发起时间', prop: 'startTime', align: 'center' },
  { label: '结束时间', prop: 'endTime', align: 'center' },
]

onMounted(() => {
  // 初始化分页参数并加载第一页任务数据
  currentPage.value = 1
  pageSize.value = 10

  // 调用获取我的任务分页数据的方法
  queryMyCompleteTaskListPage()
})

/**
 * 异步函数：查询我的已办任务列表
 * 该函数通过调用后端接口，分页查询并更新我的已办任务数据
 */
async function queryMyCompleteTaskListPage() {
  try {
    // 设置分页参数
    const pageReq = {
      current: currentPage.value,
      size: pageSize.value,
    }

    // 调用查询我的已办任务列表接口
    const result: any = await queryMyCompleteTaskList(pageReq)

    // 如果接口调用成功且返回的状态码为200，则更新数据
    if (result.success && result.code === 200) {
      // 收集数据
      const data: MyCompleteTaskListInfoVO = result.data
      myCompleteTaskData.value = data.myCompleteTaskList

      // 收集总数
      total.value = data.myCompleteTaskCount
    }
    else {
      // 显示查询失败的错误提示信息
      ElMessage({
        message: `查询失败: ${result.message || '未知错误'}`,
        type: 'error',
      })
    }
  }
  catch (error) {
    // 捕获异常并提取错误信息
    let errorMessage = '未知错误'
    if (error instanceof Error) {
      errorMessage = error.message
    }

    // 显示操作失败的错误提示信息
    ElMessage({
      message: `查询失败: ${errorMessage || '未知错误'}`,
      type: 'error',
    })
  }
}

/**
 * 异步处理页面数据函数
 * 本函数主要用于处理页面初始化或数据更新时所需的操作
 * 目前函数中的具体实现是调用一个名为 queryMyStartTaskListPage 的方法
 * 该方法可能负责从服务器获取数据、处理数据或者更新页面显示
 * 注意：此函数没有显式地定义参数和返回值，可能依赖于外部状态或全局变量
 */
async function handerPageData() {
  // 调用获取我的任务分页数据的方法
  queryMyCompleteTaskListPage()
}
</script>

<template>
  <el-table style="margin: 10px 0px;" :border="true" :data="myCompleteTaskData">
    <!-- ID 区域 -->
    <el-table-column type="selection" align="center" width="50px" />
    <!-- 表格数据 区域 -->
    <el-table-column
      v-for="(column, index) in tableColumns"
      :key="index"
      :type="column.type"
      :label="column.label"
      :prop="column.prop"
      :align="column.align"
      :width="column.width"
    />
  </el-table>
  <!-- 分页器 -->
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 30, 40, 50]"
    layout="prev, pager, next, jumper,->, sizes, total"
    :total="Math.max(total, 0)"
    @current-change="queryMyCompleteTaskListPage"
    @size-change="handerPageData"
  />
</template>

<style scoped>

</style>
